<template>
  <component class="icon-park"
             :is="name"
             :theme="theme"
             :fill="color"
             :strokeWidth="strokeWidth" />
</template>

<script>
import { defineComponent } from "vue"
import * as Icons from "@icon-park/vue-next"

export default defineComponent({
  components: Icons,
  name: "IconPark",
  props: {
    name: {
      type: String,
      required: true
    },
    theme: {
      type: String,
      default: "outline"
    },
    color: {
      type: String,
      default: "#ffffff"
    },
    strokeWidth: {
      type: Number,
      default: 2
    }
  }
})
</script>
<style lang="scss">
.icon-park {
  --icon-park-size: 0.14rem;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: var(--icon-park-size);
    height: var(--icon-park-size);
  }
}
</style>
